<template>
  <div>
      <a-table  :rowSelection="rowSelection" :dataSource="dataSource" :columns="columns" :pagination='pagination' @change='tableChange'>
        <div slot="operation" slot-scope="operation">
            <a href="javascript:;">修改</a><span> | </span>
            <a href="javascript:;">查看</a><span> | </span>
            <a href="javascript:;">删除</a>
        </div>
      </a-table>
 </div>
</template>
 
<script>
 
export default {
  props: {
 
  },
  data () {
    return {
      /**
       * 分页器属性
       */
      pagination:{
        current:1,//当前页数 v-model
        defaultCurrent:1,//默认的当前页数
        defaultPageSize:3,//每页显示几条数据
        showQuickJumper:false,//是否显示直通车
        total:5,//总数
      },
      /**
       * table数据
       */
      dataSource: [
          {
            key: '0',
            name: '设备1',
            age: '32',
            address: 'London, Park Lane no. 0',
          },
          {
            key: '1',
            name: '设备2',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
          {
            key: '3',
            name: '设备3',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
          {
            key: '4',
            name: '设备4',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
          {
            key: '5',
            name: '设备5',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
        ],
        /**
         * 列值
         */
        columns: [
          {
            title:'序号',
            width:80,
             customRender:(text,record,index)=>`${(this.pagination.current-1)*this.pagination.defaultPageSize + (index+1)}`
            // render ==> customRender
          },
          {
            title: '设备名称',
            dataIndex: 'name',
          },
          {
            title: '操作',
            dataIndex: 'operation',
             scopedSlots: { customRender: 'operation' },
          },
        ],
    };
  },
 
  components: {},
 
  computed: {
    /**
     * 全选
     */
      rowSelection() {
        const { selectedRowKeys } = this;
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
        };
      },
  },
 
  created() {},
 
  mounted() {},
 
  methods: {
    /**
     *  分页、排序、筛选变化时触发
     */
    tableChange(pagination, filters, sorter){
      this.pagination = pagination;
    }
  },
 
  watch: {}
}
 
</script>
<style lang='less' scoped>
 
</style>